<template>
  <div class="page">
    <div class="s-search p20">
      <el-form
        :model="alone.searchForm.data"
        status-icon
        ref="ruleForm"
        :inline="true"
        class="demo-ruleForm"
      >
        <el-form-item>
          <el-input placeholder="渠道名称" v-model="alone.searchForm.data.name">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="alone.searchForm.data.type"
            placeholder="请选择来源类型"
          >
            <el-option label="星探" value="scout"> </el-option>
            <el-option label="联营" value="union"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="alone.searchForm.data.status"
            placeholder="请选择账号状态"
          >
            <el-option label="正常" value="0"> </el-option>
            <el-option label="禁用" value="1"> </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item>
          <el-select
            v-model="alone.searchForm.data.orderBy"
            placeholder="请选择排序"
          >
            <el-option label="时间排序" value="time"> </el-option>
            <el-option label="提交人数升序" value="asc"> </el-option>
            <el-option label="提交人数降序" value="desc"> </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button
            icon="iconfont iconpailie"
            :type="showPrimary('submitCount')"
            @click="rChangeSearchOrderBy('submitCount')"
            >提交人数排序</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            icon="iconfont iconpailie"
            :type="showPrimary('posterViewCount')"
            @click="rChangeSearchOrderBy('posterViewCount')"
            >海报链接浏览数排序</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            icon="iconfont iconpailie"
            :type="showPrimary('pageViewCount')"
            @click="rChangeSearchOrderBy('pageViewCount')"
            >资料提交页浏览数排序</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-cascader
            placeholder="请选择部门"
            v-model="alone.searchForm.data.departmentId"
            :props="orgCascaderCp.config.props"
            :options="orgSupAjax.data"
          >
          </el-cascader>
        </el-form-item>

        <!-- <el-form-item>
          <el-select
            v-model="alone.searchForm.data.orderBy"
            placeholder="请选择排序"
          >
            <el-option label="时间排序" value="time"> </el-option>
            <el-option label="提交人数升序" value="asc"> </el-option>
            <el-option label="提交人数降序" value="desc"> </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-date-picker
            v-model="alone.searchForm.data.dateTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="请选择创建开始时间"
            end-placeholder="请选择创建结束时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="rSubmitSearchForm">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="c-main p20">
      <div class="c-aside clearfix">
        <div class="c-head">
          <!-- <el-button
            @click="rToCreate"
            type="text"
            plain
            class="fl"
            v-hasAuth:seestar_channelCreateQrcode
            >H5渠道方后台登陆链接为：https://xiaojinli6.com/cb//#/login</el-button
          > -->
          <el-link
            type="primary"
            class="fl"
            href="https://xiaojinli6.com/cb//#/login"
            target="_blank"
            >H5渠道方后台登陆链接为：https://xiaojinli6.com/cb//#/login</el-link
          ><span class="text-warning" style="margin-left: 5px;">
            /渠道已可通过登录小程序“小须鲸文化”查看主播列表及详情</span
          >
          <el-button
            type="primary"
            @click="rDownloadChannel"
            class="fr btn"
            v-hasAuth:seestar_channelListExport
            >导出渠道</el-button
          >
          <el-button
            @click="rNavToH5doc"
            type="primary"
            plain
            class="fr btn"
            v-hasAuth:seestar_channelH5docList
            >h5平台文案管理</el-button
          >
          <el-button
            @click="rToCreate"
            type="primary"
            plain
            class="fr btn"
            v-hasAuth:seestar_channelCreateQrcode
            >新增渠道</el-button
          >
        </div>
      </div>
      <div class="c-section">
        <div class="c-body">
          <el-table
            :data="pageAjax.data"
            stripe
            style="width: 100%"
            row-key="id"
          >
            <el-table-column label="渠道名称">
              <template slot-scope="scope">
                {{ scope.row.name }}
              </template>
            </el-table-column>
            <el-table-column label="渠道类型">
              <template slot-scope="scope">
                {{
                  scope.row.type == "scout"
                    ? "星探"
                    : scope.row.subType == "individual"
                    ? "联营(个人联营)"
                    : "联营(公司联营)"
                }}
              </template>
            </el-table-column>
            <el-table-column label="渠道id">
              <template slot-scope="scope">
                {{ scope.row.id || "" }}
              </template>
            </el-table-column>
            <el-table-column label="联系方式">
              <template slot-scope="scope">
                <p>微信：{{ scope.row.wxNo || "" }}</p>
                <p>手机号：{{ scope.row.loginAccount || "" }}</p>
              </template>
            </el-table-column>
            <el-table-column label="结算方式">
              <template slot-scope="scope">
                <div
                  v-if="scope.row.settlements && scope.row.settlements.length"
                >
                  <p
                    v-for="(item, index) in scope.row.settlements"
                    :key="index"
                  >
                    {{
                      tranlate.platformTranlate[item.platform] +
                        (item.cooperationMode ? "-" + item.cooperationMode : "")
                    }}
                  </p>
                </div>
                <div v-else>无</div>
              </template>
            </el-table-column>
            <!-- <el-table-column label="渠道分类">
              <template slot-scope="scope">
                {{ scope.row.channelClass || "" }}
              </template>
            </el-table-column> -->

            <el-table-column label="状态">
              <template slot-scope="scope">
                {{ scope.row.status == 0 ? "有效" : "无效" }}
              </template>
            </el-table-column>

            <el-table-column label="所属招募">
              <template slot-scope="scope">
                <div v-if="scope.row.recruit">
                  {{
                    scope.row.recruit.corporationName +
                      "-" +
                      scope.row.recruit.departmentName +
                      "-" +
                      (scope.row.recruit.platformName
                        ? scope.row.recruit.platformName.substring(0, 15)
                        : "") +
                      "... -" +
                      scope.row.recruit.nickName
                  }}
                </div>
                <div v-else>无</div>
              </template>
            </el-table-column>
            <el-table-column label="海报链接浏览数(次)">
              <template slot-scope="scope">
                {{ scope.row.posterViewCount || "0" }}
                <div v-hasAuth:seestar_channelH5BillVisitor>
                  <el-button
                    v-if="scope.row.posterViewCount"
                    type="text"
                    @click="rNavToH5BillVisitor(scope.row.id)"
                    >(查看详情)</el-button
                  >
                </div>
              </template>
            </el-table-column>
            <el-table-column label="资料提交页浏览数(次)">
              <template slot-scope="scope">
                {{ scope.row.pageViewCount || "0" }}
                <div v-hasAuth:seestar_channelH5SubmitVisitor>
                  <el-button
                    v-if="scope.row.pageViewCount"
                    type="text"
                    @click="rNavToH5SubmitVisitor(scope.row.id)"
                    >(查看详情)</el-button
                  >
                </div>
              </template>
            </el-table-column>

            <el-table-column label="提交人数">
              <template slot-scope="scope">
                {{ scope.row.submitCount || "0" }}
                <div v-if="scope.row.submitCount">
                  主播线索{{ scope.row.submitCountClue || "0" }}
                  <div v-hasAuth:seestar_channelClueList>
                    <p v-if="scope.row.submitCountClue">
                      (<el-button
                        type="text"
                        @click="rNavToClueList(scope.row.id)"
                        >查看详情</el-button
                      >)
                    </p>
                  </div>
                </div>
                <div v-if="scope.row.submitCount">
                  其他状态{{ scope.row.submitCountOther || "0" }}
                  <div v-hasAuth:seestar_statisticsList>
                    <p v-if="scope.row.submitCountOther">
                      (<el-button
                        type="text"
                        @click="rNavToStatisticsList(scope.row.id)"
                        >查看详情</el-button
                      >)
                    </p>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="渠道创建时间">
              <template slot-scope="scope">
                {{ scope.row.createTime || "无" }}
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  v-hasAuth:seestar_channelBillView
                  @click="rShowBillDrawerCp(scope.row.id)"
                  >推广素材</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  v-hasAuth:seestar_channelQrcodeDetail
                  @click="rViewDetail(scope.row.id)"
                  >详情</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="rEdit(scope.row.id)"
                  v-hasAuth:seestar_channelEditQrcode
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="rTriggerChangePassword(scope.row.id)"
                  v-hasAuth:seestar_channelChangePassword
                  >修改密码</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="rNavToSettleStyle(scope.row.id)"
                  v-hasAuth:seestar_channelSettleStyle
                  >结算方式</el-button
                >
                <el-switch
                  v-model="scope.row.status"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-value="0"
                  :inactive-value="1"
                  v-hasAuth:seestar_channelStatus
                  @change="rUpdateChannelStatus(scope.row)"
                >
                </el-switch>
                <!-- <el-button
                  type="text"
                  size="small"
                  v-if="scope.row.channelType == 1"
                  @click="rViewImg(scope.row.qrcodeUrl)"
                  >查看二维码</el-button
                >
                <template v-else>
                  <el-button
                    type="text"
                    size="small"
                    @click="rViewDetail(scope.row.channelId)"
                    >详情</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    @click="rViewH5Link(scope.row.channelId)"
                    >查看h5推广链接</el-button
                  >
                </template>
                <el-button
                  type="text"
                  size="small"
                  @click="rEdit(scope.row.channelId)"
                  v-hasAuth:seestar_channelEditQrcode
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="rShowBillDrawerCp(scope.row.channelId)"
                  v-hasAuth:seestar_channelBillView
                  >渠道海报</el-button
                > -->
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="c-footer">
          <div class="c-pagination">
            <el-pagination
              layout="prev, pager, next"
              @current-change="rPagingChange"
              @prev-click="rPagingChange"
              @next-click="rPagingChange"
              :current-page="pageAjax.paging.current"
              :total="pageAjax.paging.total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 图片预览插件 -->
    <yj-img-preview
      :pics="imgPreviewCp.data"
      :show="imgPreviewCp.config.show"
      @close="rCloseImgPreviewCp"
    >
    </yj-img-preview>
    <!-- channelDrawerCp -->
    <el-drawer
      :title="channelDrawerCp.config.title"
      :visible.sync="channelDrawerCp.config.visible"
      :direction="channelDrawerCp.config.direction"
      :size="channelDrawerCp.config.size"
    >
      <div class="f-channelDrawerCp">
        <div class="n-content">
          <el-row>
            <el-col :span="8" :offset="8">
              <el-form ref="status" label-width="150px">
                <!-- <el-form-item label="新增渠道类型：">
                  <el-radio-group
                    @change="rChannelTypeChange"
                    v-model="channelDrawerCp.data.channelType"
                    :disabled="
                      channelDrawerCp.disabled || channelDrawerCp.operation
                    "
                  >
                    <el-radio-button :label="1"
                      >小程序二维码渠道</el-radio-button
                    >
                    <el-radio-button :label="2">h5渠道</el-radio-button>
                  </el-radio-group>
                </el-form-item> -->
                <el-form-item label="渠道名称：" class="label-must">
                  <el-input
                    placeholder="渠道名称"
                    :disabled="channelDrawerCp.disabled"
                    v-model="channelDrawerCp.data.name"
                  ></el-input>
                </el-form-item>
                <el-form-item label="选择渠道类型：" class="label-must">
                  <el-select
                    v-model="channelDrawerCp.data.type"
                    placeholder="选择渠道类型"
                    :disabled="
                      channelDrawerCp.disabled || channelDrawerCp.operation
                    "
                  >
                    <el-option label="星探" value="scout"> </el-option>
                    <el-option label="联营" value="union"> </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="联营类型："
                  v-if="channelDrawerCp.data.type == 'union'"
                  class="label-must"
                >
                  <el-select
                    v-model="channelDrawerCp.data.subType"
                    placeholder="选择联营类型"
                    :disabled="
                      channelDrawerCp.disabled || channelDrawerCp.operation
                    "
                  >
                    <el-option label="个人联营" value="individual"> </el-option>
                    <el-option label="公司联营" value="corporation">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="联系微信号：" class="label-must">
                  <el-input
                    placeholder="联系微信号"
                    :disabled="channelDrawerCp.disabled"
                    v-model="channelDrawerCp.data.wxNo"
                  ></el-input>
                </el-form-item>
                <el-form-item label="登陆手机号：" class="label-must">
                  <el-input
                    placeholder="登陆手机号"
                    :disabled="channelDrawerCp.disabled"
                    v-model="channelDrawerCp.data.loginAccount"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  class="label-must"
                  label="渠道登陆密码："
                  v-if="!channelDrawerCp.disabled && !channelDrawerCp.operation"
                >
                  <el-input
                    placeholder="渠道登陆密码"
                    v-model="channelDrawerCp.data.loginPassword"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  class="label-must"
                  label="渠道确认密码："
                  v-if="!channelDrawerCp.disabled && !channelDrawerCp.operation"
                >
                  <el-input
                    placeholder="渠道确认密码"
                    v-model="channelDrawerCp.data.confirmPassword"
                  ></el-input>
                </el-form-item>
                <el-form-item v-if="!channelDrawerCp.disabled">
                  <el-button type="primary" @click="rSubmitCreateForm"
                    >提交</el-button
                  >
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-drawer>
    <!-- changePasswordDrawerCp -->
    <el-drawer
      :title="changePasswordDrawerCp.config.title"
      :visible.sync="changePasswordDrawerCp.config.visible"
      :direction="changePasswordDrawerCp.config.direction"
      :size="changePasswordDrawerCp.config.size"
    >
      <div class="f-channelDrawerCp">
        <div class="n-content">
          <el-row>
            <el-col :span="14" :offset="5">
              <el-form ref="status" label-width="150px">
                <el-form-item label="输入新密码：">
                  <el-input
                    placeholder="输入新密码"
                    v-model="changePasswordDrawerCp.data.password"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button @click="rSubmitChangePassword">确定</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-drawer>
    <!-- h5LinkDrawerCp -->
    <el-drawer
      :title="h5LinkDrawerCp.config.title"
      :visible.sync="h5LinkDrawerCp.config.visible"
      :direction="h5LinkDrawerCp.config.direction"
      :size="h5LinkDrawerCp.config.size"
    >
      <div class="f-channelDrawerCp">
        <div class="n-content">
          <el-row>
            <el-col :span="14" :offset="5">
              <el-form ref="status" label-width="150px">
                <el-form-item label="">
                  <div style="text-align: center;">
                    <el-button type="text" disabled
                      >{{
                        channelDrawerCp.data.channelName
                      }}
                      H5推广链接</el-button
                    >
                  </div>
                </el-form-item>
                <el-row>
                  <el-col :span="18">
                    <el-form-item label="渠道链接：">
                      <el-input
                        placeholder="渠道账号"
                        v-model="channelDrawerCp.data.h5Url"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6"
                    ><el-button
                      :data-clipboard-text="channelDrawerCp.data.h5Url"
                      class="btn-copy"
                      >复制链接</el-button
                    ></el-col
                  >
                </el-row>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-drawer>

    <!-- billDrawerCp -->
    <el-drawer
      :title="billDrawerCp.config.title"
      :visible.sync="billDrawerCp.config.visible"
      :direction="billDrawerCp.config.direction"
      :size="billDrawerCp.config.size"
    >
      <div class="f-channelDrawerCp f-billDrawerCp">
        <div class="n-content">
          <div class="scrollY full">
            <div class="n-billSelect">
              <el-row>
                <el-col :span="14" :offset="5">
                  <div class="tc">
                    <el-radio-group
                      v-model="billDrawerCp.data.materialType"
                      @change="rResetbillDrawerCpData"
                    >
                      <el-radio-button label="1">小程序二维码</el-radio-button>
                      <el-radio-button label="2">H5推广链接</el-radio-button>
                    </el-radio-group>
                    <div>
                      <el-link type="primary" disabled class="mt10"
                        >微信内优先选择小程序二维码，微信外优先选择H5链接</el-link
                      >
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="n-billMain">
              <el-row class="mt20">
                <el-col :span="16" :offset="4">
                  <div
                    class="n-billQrcode"
                    v-if="billDrawerCp.data.materialType == 1"
                  >
                    <el-row class="mt20">
                      <el-col :span="6"
                        ><el-button
                          type="text"
                          disabled
                          style="display:block;text-align:right;width:100%;"
                          >选择类别：</el-button
                        ></el-col
                      >
                      <el-col :span="10">
                        <el-select
                          v-model="billDrawerCp.data.planType"
                          placeholder="请选择类别"
                          style="display:block;"
                          @change="rSelectPlanTypeToCreate"
                        >
                          <el-option
                            v-for="item in h5PageTypeListSupAjax.qrCodeData"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-col>
                    </el-row>
                    <el-row v-if="billDrawerCp.data.planType" class="mt20">
                      <el-col :span="14" :offset="5">
                        <el-form ref="status" label-width="150px">
                          <el-row>
                            <el-col :span="8" :offset="8">
                              <el-button
                                ><a
                                  :href="billDrawerCp.data.planData.qrcodeUrl"
                                  target="_blank"
                                  download="bill.jpg"
                                  >保存二维码为图片</a
                                ></el-button
                              >
                            </el-col>
                          </el-row>
                          <el-row class="mt20">
                            <el-col :span="12" :offset="6">
                              <img
                                class="hFull"
                                :src="billDrawerCp.data.planData.qrcodeUrl"
                                alt=""
                              />
                            </el-col>
                          </el-row>
                        </el-form>
                      </el-col>
                    </el-row>

                    <el-row
                      v-if="billDrawerCp.data.planData.pageUrl"
                      class="mt20"
                    >
                      <el-col :span="6"
                        ><el-button
                          type="text"
                          disabled
                          style="display:block;text-align:right;width:100%;"
                          >请选择对应海报：</el-button
                        ></el-col
                      >
                      <el-col :span="18">
                        <el-select
                          v-model="billDrawerCp.data.billType"
                          placeholder="请选择海报"
                          style="display:block;"
                          @change="rSelectBillToCreate"
                        >
                          <el-option
                            v-for="item in billTypeListSupAjax.data"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          >
                          </el-option>
                        </el-select>
                      </el-col>
                    </el-row>

                    <el-row
                      v-if="billDrawerCp.data.billData.posterH5Url"
                      class="mt20"
                    >
                      <el-col :span="18" :offset="3">
                        <el-form ref="status" label-width="150px">
                          <el-row>
                            <el-col :span="15">
                              <el-form-item label="海报H5链接：">
                                <el-input
                                  placeholder="渠道账号"
                                  v-model="
                                    billDrawerCp.data.billData.posterH5Url
                                  "
                                ></el-input>
                              </el-form-item>
                            </el-col>
                            <el-col :span="9">
                              <el-button-group>
                                <el-button
                                  :data-clipboard-text="
                                    billDrawerCp.data.billData.posterH5Url
                                  "
                                  class="btn-copy"
                                  >复制海报链接</el-button
                                >
                                <el-button
                                  ><a
                                    :href="billDrawerCp.data.billData.posterUrl"
                                    target="_blank"
                                    download="bill.jpg"
                                    >保存海报为图片</a
                                  ></el-button
                                >
                              </el-button-group>
                            </el-col>
                          </el-row>
                        </el-form>
                        <div class="mt20">
                          <img
                            class="hFull"
                            :src="billDrawerCp.data.billData.posterUrl"
                            alt=""
                          />
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                  <div class="n-billH5link" v-else>
                    <el-row class="mt20">
                      <el-col :span="6"
                        ><el-button
                          type="text"
                          disabled
                          style="display:block;text-align:right;width:100%;"
                          >选择类别：</el-button
                        ></el-col
                      >
                      <el-col :span="10">
                        <el-select
                          v-model="billDrawerCp.data.planType"
                          placeholder="请选择类别"
                          style="display:block;"
                          @change="rSelectPlanTypeToCreate"
                        >
                          <el-option
                            v-for="item in h5PageTypeListSupAjax.h5Data"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-col>
                    </el-row>
                    <el-row v-if="billDrawerCp.data.planType" class="mt20">
                      <el-col :span="18" :offset="3">
                        <el-form ref="status" label-width="150px">
                          <el-row>
                            <el-col :span="15">
                              <el-form-item label="H5链接：">
                                <el-input
                                  placeholder="H5链接"
                                  v-model="billDrawerCp.data.planData.pageUrl"
                                ></el-input>
                              </el-form-item>
                            </el-col>
                            <el-col :span="9">
                              <el-button-group>
                                <el-button
                                  :data-clipboard-text="
                                    billDrawerCp.data.planData.pageUrl
                                  "
                                  class="btn-copy"
                                  >复制链接</el-button
                                >
                              </el-button-group>
                            </el-col>
                          </el-row>
                        </el-form>
                      </el-col>
                    </el-row>

                    <el-row v-if="billDrawerCp.data.planData.pageUrl">
                      <el-col :span="6"
                        ><el-button
                          type="text"
                          disabled
                          style="display:block;text-align:right;width:100%;"
                          >请选择对应海报：</el-button
                        ></el-col
                      >
                      <el-col :span="18">
                        <el-select
                          v-model="billDrawerCp.data.billType"
                          placeholder="请选择海报"
                          style="display:block;"
                          @change="rSelectBillToCreate"
                        >
                          <el-option
                            v-for="item in billTypeListSupAjax.data"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          >
                          </el-option>
                        </el-select>
                      </el-col>
                    </el-row>

                    <el-row
                      v-if="billDrawerCp.data.billData.posterH5Url"
                      class="mt20"
                    >
                      <el-col :span="18" :offset="3">
                        <el-form ref="status" label-width="150px">
                          <el-row>
                            <el-col :span="15">
                              <el-form-item label="海报H5链接：">
                                <el-input
                                  placeholder="渠道账号"
                                  v-model="
                                    billDrawerCp.data.billData.posterH5Url
                                  "
                                ></el-input>
                              </el-form-item>
                            </el-col>
                            <el-col :span="9">
                              <el-button-group>
                                <el-button
                                  :data-clipboard-text="
                                    billDrawerCp.data.billData.posterH5Url
                                  "
                                  class="btn-copy"
                                  >复制海报链接</el-button
                                >
                                <el-button
                                  ><a
                                    :href="billDrawerCp.data.billData.posterUrl"
                                    target="_blank"
                                    download="bill.jpg"
                                    >保存海报为图片</a
                                  ></el-button
                                >
                              </el-button-group>
                            </el-col>
                          </el-row>
                        </el-form>
                        <div class="mt20">
                          <img
                            class="hFull"
                            :src="billDrawerCp.data.billData.posterUrl"
                            alt=""
                          />
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import {
  getChannelList,
  getChannelDetail,
  addChannel,
  updateChannel,
  updatePassword,
  updateChannelStatus,
  getBillList,
  getPlanData,
  getBillData,
  getH5PageTypeList,
  downloadChannel,
  getPlatformSettlementsList
} from "@/api/channel.js";
import { getOffspringnTree } from "@/assets/js/util.js";
import _ from "lodash";
import Clipboard from "clipboard";

export default {
  name: "seestar_channelQrcodeList",
  data: () => ({
    pageAjax: {
      btnDisabled: false,
      btnLoading: false,
      loading: false,
      lock: false,
      paging: {
        pages: 1, // 总页数
        current: 0, // 当前页
        total: 1, // 总数量
        pageSize: 10 // 每页数量
      },
      data: [],
      sumData: {}
    },
    billTypeListSupAjax: {
      //
      data: []
    },
    billAjax: {
      loading: false,
      data: {}
    },
    h5PageTypeListSupAjax: {
      data: []
    },
    orgSupAjax: {
      data: []
    },
    alone: {
      searchForm: {
        data: {
          name: "",
          type: "",
          status: "0",
          orderBy: "",
          order: "desc",
          dateTime: "",
          startDate: "",
          endDate: "",
          departmentId: ""
        }
      },
      channelDrawerCp: {}
    },
    tranlate: {
      platformTranlate: {}
    },
    orgCascaderCp: {
      config: {
        props: {
          value: "id",
          label: "name",
          checkStrictly: true,
          emitPath: false
        }
      }
    },
    imgPreviewCp: {
      config: {
        show: false
      },
      data: []
    },
    channelDrawerCp: {
      loading: false,
      disabled: false,
      operation: false,
      config: {
        title: "",
        visible: false,
        direction: "ttb",
        size: "70%"
      },
      data: {
        name: "",
        type: "",
        wxNo: "",
        loginAccount: "",
        subType: "corporation",
        loginPassword: "",
        confirmPassword: null
      },
      backUpData: {
        name: "",
        type: "",
        wxNo: "",
        loginAccount: "",
        subType: "corporation",
        loginPassword: "",
        confirmPassword: null
      }
    },
    changePasswordDrawerCp: {
      config: {
        title: "修改密码",
        visible: false,
        direction: "ttb",
        size: "30%"
      },
      loading: false,
      data: {
        password: "",
        id: ""
      }
    },
    h5LinkDrawerCp: {
      config: {
        title: "",
        visible: false,
        direction: "ttb",
        size: "30%"
      },
      data: {}
    },
    billDrawerCp: {
      config: {
        title: "",
        visible: false,
        direction: "ttb",
        size: "90%"
      },
      data: {
        materialType: "2", // 素材类型，有二维码和h5链接
        planType: "", // 推广计划，有h5和小程序页面填写
        planData: {
          // 得到的计划数据，对应二维码或填写链接
          id: "",
          pageUrl: "",
          qrcodeUrl: ""
        },
        billType: "", // 宣传海报类型，让别人了解为什么去plan填写
        billData: {
          // 宣传海报数据
          posterH5Url: "",
          posterUrl: ""
        },
        channelId: 0
      },
      backUpData: {
        // 备份数据，方便重置数据
        materialType: "2", // 素材类型，有二维码和h5链接
        planType: "", // 推广计划，有h5和小程序页面填写
        planData: {
          id: "",
          pageUrl: "",
          qrcodeUrl: ""
        }, // 得到的计划数据，对应二维码或填写链接
        billType: "", // 宣传海报类型，让别人了解为什么去plan填写
        billData: {
          posterH5Url: "",
          posterUrl: ""
        }, // 宣传海报数据
        channelId: 0
      }
    },

    clipboard: null
  }),
  created() {
    let _that = this;
    _that.getPlatformSettlementsListData().then(() => {
      _that.getPageData();
    });
    _that.getOrgData();
    _that.getBillList();
    _that.getH5PageTypeList();
  },
  mounted() {
    let _that = this;
    _that.clipboard = new Clipboard(".btn-copy");

    _that.clipboard.on("success", function() {
      _that.$message.success("复制成功");
    });
    _that.clipboard.on("error", function() {
      _that.$message.error("复制失败");
    });
  },
  beforeDestroy() {
    this.clipboard.destroy();
  },
  methods: {
    rChangeSearchOrderBy: _.debounce(function(val) {
      let _that = this;
      let isCurrent = _that.alone.searchForm.data.orderBy == val;
      // 如果是当前选择
      if (isCurrent) {
        if (_that.alone.searchForm.data.order == "asc") {
          _that.alone.searchForm.data.orderBy = "";
          _that.alone.searchForm.data.order = "desc";
        } else {
          _that.alone.searchForm.data.orderBy = val;
          _that.alone.searchForm.data.order = "asc";
        }
      } else {
        _that.alone.searchForm.data.orderBy = val;
        _that.alone.searchForm.data.order = "desc";
      }

      _that.rSubmitSearchForm();
    }, 600),
    showPrimary(val) {
      if (this.alone.searchForm.data.orderBy == val) {
        if (this.alone.searchForm.data.order == "desc") {
          return "success";
        } else {
          return "primary";
        }
      }
      return "default";
    },
    rTriggerChangePassword(id) {
      let _that = this;
      _that.changePasswordDrawerCp.data.id = id;
      _that.changePasswordDrawerCp.config.visible = true;
      _that.changePasswordDrawerCp.data.password = "";
    },
    rSubmitChangePassword() {
      let _that = this;

      if (_that.changePasswordDrawerCp.loading) {
        return;
      }

      if (!_that.changePasswordDrawerCp.data.password) {
        _that.$message.error("密码不能为空");
        return;
      }

      _that.changePasswordDrawerCp.loading = true;

      updatePassword({
        channelId: _that.changePasswordDrawerCp.data.id,
        password: _that.changePasswordDrawerCp.data.password
      })
        .then(resp => {
          let respData = resp.data || {};
          if (respData.code === _that.STATUS.success[0]) {
            _that.changePasswordDrawerCp.config.visible = false;
            _that.$message.success(respData.msg || "修改成功");
          } else {
            _that.$message.error(respData.msg || "修改失败");
          }
        })
        .finally(() => {
          _that.changePasswordDrawerCp.loading = false;
        });
    },
    rChannelTypeChange() {
      this.channelDrawerCp.data.channelClass = "";
    },
    rUpdateChannelStatus(data) {
      let _that = this;
      let loading = _that.$loading();

      updateChannelStatus({ channelId: data.id, status: data.status })
        .then(resp => {
          let respData = resp.data || {};
          if (respData.code === _that.STATUS.success[0]) {
            _that.$message.success(respData.msg || "修改成功");
          } else {
            _that.$message.error(respData.msg || "修改失败");
          }
        })
        .finally(() => {
          loading.close();
        });
    },
    rShowBillDrawerCp(id) {
      this.billDrawerCp.data.channelId = id;
      this.billDrawerCp.config.visible = true;
      this.billDrawerCp.data.materialType = "2";

      this.billDrawerCp.data.planType = ""; // 推广计划，有h5和小程序页面填写
      this.billDrawerCp.data.planData = _.cloneDeep(
        this.billDrawerCp.backUpData.planData
      ); // 得到的计划数据，对应二维码或填写链接
      this.billDrawerCp.data.billType = ""; // 宣传海报类型，让别人了解为什么去plan填写
      this.billDrawerCp.data.billData = _.cloneDeep(
        this.billDrawerCp.backUpData.billData
      ); // 宣传海报数据
    },
    rSelectPlanTypeToCreate() {
      let _that = this;
      if (_that.billDrawerCp.loading) {
        _that.$message.error("正在请求中，请稍等");
        return;
      }
      _that.billDrawerCp.loading = true;
      let backUpData = _.cloneDeep(_that.billDrawerCp.backUpData);

      backUpData.materialType = _that.billDrawerCp.data.materialType;
      backUpData.planType = _that.billDrawerCp.data.planType;
      backUpData.channelId = _that.billDrawerCp.data.channelId;

      _that.billDrawerCp.data = backUpData;
      getPlanData({
        params: {
          channelId: _that.billDrawerCp.data.channelId,
          type: _that.billDrawerCp.data.materialType,
          subType: _that.billDrawerCp.data.planType
        }
      })
        .then(resp => {
          let respData = resp.data || {};
          if (respData.code === _that.STATUS.success[0]) {
            _that.billDrawerCp.data.planData = respData.data;
          } else {
            _that.$message.error(respData.msg);
          }
        })
        .finally(() => {
          _that.billDrawerCp.loading = false;
        });
    },
    rSelectBillToCreate() {
      let _that = this;
      if (_that.billDrawerCp.loading) {
        _that.$message.error("正在生成中，请稍等");
        return;
      }

      _that.billDrawerCp.loading = true;
      getBillData({
        params: {
          materialId: _that.billDrawerCp.data.planData.id,
          channelId: _that.billDrawerCp.data.channelId,
          posterId: _that.billDrawerCp.data.billType
        }
      })
        .then(resp => {
          let respData = resp.data || {};
          if (respData.code === _that.STATUS.success[0]) {
            _that.billDrawerCp.data.billData = respData.data;
          } else {
            _that.$message.error(respData.msg);
          }
        })
        .finally(() => {
          _that.billDrawerCp.loading = false;
        });
    },
    rResetbillDrawerCpData(v) {
      let data = _.cloneDeep(this.billDrawerCp.backUpData);
      data.materialType = v;
      data.channelId = this.billDrawerCp.data.channelId;
      this.billDrawerCp.data = data;
    },
    rDownloadChannel() {
      let _that = this;
      if (!_that.hasAuth(["seestar_channelListExport"])) {
        return;
      }

      let searchForm = _that.alone.searchForm;
      if (searchForm.data.dateTime) {
        searchForm.data.startDate = searchForm.data.dateTime[0] || "";
        searchForm.data.endDate = searchForm.data.dateTime[1] || "";
      }
      delete searchForm.data.dateTime;

      let loadingHandle = _that.$loading({
        text: "下载中。。。",
        lock: true
      });

      downloadChannel({ params: searchForm.data })
        .then(resp => {
          let respData = resp.data || {};

          //if (respData.code === _that.STATUS.success[0]) {
          var blob = new Blob([respData]);
          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob); //创建下载的链接
          downloadElement.href = href;
          downloadElement.download = "渠道列表数据导出.csv"; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象
          // } else {
          //   _that.$message.error(respData.msg || "查询失败");
          // }
        })
        .finally(() => {
          loadingHandle.close();
        });
    },
    rSubmitSearchForm() {
      let _that = this;
      if (_that.pageAjax.loading) {
        return;
      }

      _that.pageAjax.lock = false;
      _that.pageAjax.paging.current = 0;
      _that.getPageData();
    },
    rPagingChange(e) {
      let _that = this;
      _that.pageAjax.paging.current = e - 1;
      _that.getPageData();
    },
    rCloseImgPreviewCp() {
      this.imgPreviewCp.config.show = false;
    },
    getPageData() {
      let _that = this;
      let searchForm = _.cloneDeep(_that.alone.searchForm);
      let pageAjax = _that.pageAjax;

      if (pageAjax.loading || pageAjax.lock) {
        return;
      }

      let data = { ...searchForm.data };
      if (searchForm.data.dateTime) {
        data.startDate = searchForm.data.dateTime[0];
        data.endDate = searchForm.data.dateTime[1];
        delete data.dateTime;
      }

      data.pageNo = _that.pageAjax.paging.current + 1;
      _that.pageAjax.loading = true;
      getChannelList({ params: data })
        .then(resp => {
          let respData = resp.data || {};
          if (respData.code === _that.STATUS.success[0]) {
            _that.pageAjax.data = respData.data.list;
            _that.pageAjax.paging = {
              pages: respData.data.pagination.pages,
              current: respData.data.pagination.current,
              total: respData.data.pagination.total,
              pageSize: respData.data.pagination.pageSize
            };
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        })
        .finally(() => {
          _that.pageAjax.loading = false;
        });
    },
    getOrgData() {
      let _that = this;
      _that.$store.dispatch("getDepartmentList").then(() => {
        let arr = _.cloneDeep(_that.$store.state.departmentList) || [];
        _that.orgSupAjax.data = getOffspringnTree(_.cloneDeep(arr), 0);
      });
    },
    getPlatformSettlementsListData() {
      let _that = this;
      return getPlatformSettlementsList()
        .then(resp => {
          let respData = resp.data || {};
          if (respData.code === _that.STATUS.success[0]) {
            let platformTranlate = {};
            respData.data.filter(item => {
              platformTranlate[item.value] = item.name;
            });
            _that.tranlate.platformTranlate = platformTranlate;
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        })
        .finally();
    },
    getBillList() {
      let _that = this;

      getBillList({ params: { type: 1 } }).then(resp => {
        let respData = resp.data || {};
        if (respData.code === _that.STATUS.success[0]) {
          _that.billTypeListSupAjax.data = respData.data;
        }
      });
    },
    // 获取h5页面种类
    getH5PageTypeList() {
      let _that = this;
      getH5PageTypeList().then(resp => {
        let respData = resp.data || {};
        if (respData.code === _that.STATUS.success[0]) {
          let respResult = respData.data || [];
          let qrCodeData = [];
          let h5Data = [];
          respResult.forEach(item => {
            // item.value = item.value.toLocaleLowerCase();
            if (item.type == 1) {
              qrCodeData.push(item);
            } else {
              h5Data.push(item);
            }
          });
          _that.h5PageTypeListSupAjax.qrCodeData = qrCodeData;
          _that.h5PageTypeListSupAjax.h5Data = h5Data;
          //}
        } else {
          _that.$message.error(respData.msg || "获取失败");
        }
      });
    },

    rSubmitCreateForm() {
      let _that = this;
      let channelDrawerCpData = _that.channelDrawerCp.data;
      if (_that.channelDrawerCp.loading) {
        return;
      }
      if (!channelDrawerCpData.name) {
        _that.$message.error("渠道名称不能为空");
        return;
      }
      if (!channelDrawerCpData.type) {
        _that.$message.error("渠道类型不能为空");
        return;
      }
      // 联营必须选择联营类型
      if (channelDrawerCpData.type == "union") {
        if (!channelDrawerCpData.subType) {
          _that.$message.error("请选择联营类型");
          return;
        }
      } else {
        delete channelDrawerCpData.subType;
      }

      if (!channelDrawerCpData.wxNo) {
        _that.$message.error("微信号不能为空");
        return;
      }
      if (!channelDrawerCpData.id && !channelDrawerCpData.loginAccount) {
        _that.$message.error("登陆账号不能为空");
        return;
      }
      if (!channelDrawerCpData.id && !channelDrawerCpData.loginPassword) {
        _that.$message.error("渠道登陆密码不能为空");
        return;
      }
      if (
        !channelDrawerCpData.id &&
        channelDrawerCpData.loginPassword != channelDrawerCpData.confirmPassword
      ) {
        _that.$message.error("渠道登陆密码和确认密码不相等");
        return;
      }

      if (channelDrawerCpData.id) {
        _that.updateChannel(channelDrawerCpData);
      } else {
        _that.addChannel(channelDrawerCpData);
      }
    },
    addChannel(channelDrawerCpData) {
      let _that = this;
      addChannel(channelDrawerCpData)
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            _that.$message.success(respData.msg || "修改成功");
            _that.channelDrawerCp.config.visible = false;
            _that.pageAjax.paging.current =
              _that.pageAjax.paging.current > 0
                ? _that.pageAjax.paging.current - 1
                : 0;
            _that.getPageData();
          } else {
            _that.$message.error(respData.msg || "修改失败");
          }
        })
        .finally(() => {
          _that.channelDrawerCp.loading = false;
        });
    },
    updateChannel(channelDrawerCpData) {
      let _that = this;
      updateChannel(channelDrawerCpData)
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            _that.$message.success(respData.msg || "修改成功");
            _that.channelDrawerCp.config.visible = false;
            _that.pageAjax.paging.current =
              _that.pageAjax.paging.current > 0
                ? _that.pageAjax.paging.current - 1
                : 0;
            _that.getPageData();
          } else {
            _that.$message.error(respData.msg || "修改失败");
          }
        })
        .finally(() => {
          _that.channelDrawerCp.loading = false;
        });
    },
    getChannelDetailData(id) {
      let _that = this;

      if (_that.channelDrawerCp.loading) {
        _that.$message.error("数据加载中，请稍等");
        return;
      }
      _that.channelDrawerCp.loading = true;
      return getChannelDetail({ params: { channelId: id } })
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            _that.channelDrawerCp.data = respData.data;
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        })
        .finally(() => {
          _that.channelDrawerCp.loading = false;
        });
    },
    rViewH5Link(id) {
      let _that = this;

      _that.getChannelDetailData(id).then(() => {
        _that.h5LinkDrawerCp.config.visible = true;
      });
    },
    rViewDetail(id) {
      let _that = this;

      this.channelDrawerCp.disabled = true;
      this.channelDrawerCp.operation = true;
      _that.getChannelDetailData(id).then(() => {
        _that.channelDrawerCp.config.visible = true;
      });
    },
    rChangeSelect() {
      this.$forceUpdate();
    },
    rEdit(id) {
      let _that = this;

      _that.getChannelDetailData(id).then(() => {
        _that.channelDrawerCp.operation = true;
        _that.channelDrawerCp.disabled = false;
        _that.channelDrawerCp.config.visible = true;
      });
    },
    rViewImg(url) {
      this.imgPreviewCp.data.length = [];
      this.imgPreviewCp.data.push(url);
      this.imgPreviewCp.config.show = true;
    },
    rToCreate() {
      this.channelDrawerCp.disabled = false;
      this.channelDrawerCp.operation = false;
      this.channelDrawerCp.data = _.cloneDeep(this.channelDrawerCp.backUpData);
      this.channelDrawerCp.config.visible = true;
    },
    rNavToH5BillVisitor(id) {
      this.$router.push({
        name: "seestar_channelH5BillVisitor",
        query: { channelId: id }
      });
    },
    rNavToH5SubmitVisitor(id) {
      this.$router.push({
        name: "seestar_channelH5SubmitVisitor",
        query: { channelId: id }
      });
    },
    rNavToClueList(id) {
      this.pushRefresh({
        name: "seestar_channelClueList",
        query: { channelId: id }
      });
      // this.$router.push();
    },
    rNavToStatisticsList(id) {
      this.pushRefresh({
        name: "seestar_statisticsList",
        query: { channelId: id }
      });
      // this.$router.push({
      //   name: "seestar_statisticsList",
      //   query: { channelId: id }
      // });
    },
    rNavToSettleStyle(id) {
      this.$router.push({
        name: "seestar_channelSettleStyle",
        query: { channelId: id }
      });
    },
    rNavToH5doc() {
      this.$router.push({ name: "seestar_channelH5docList" });
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  .s-search {
    border-bottom: 1px solid #eee;
  }
  .c-aside {
    .btn {
      margin-right: 20px;
    }
    .diy-uploadBtn {
      margin-right: 20px;
    }
  }
  .c-main {
    margin-top: 20px;
  }
  .c-pagination {
    margin-top: 20px;
    text-align: center;
  }

  .f-channelDrawerCp {
    overflow: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: 50px;
    bottom: 0;
    .n-content {
      height: 100%;
      padding: 30px 0;
      overflow: auto;
      box-sizing: border-box;
    }
    .n-note {
      line-height: 2;
      color: #999;
    }
  }
  .f-billDrawerCp {
    .n-content {
      padding: 50px 0 30px 0;
    }
    .n-billSelect {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      z-index: 5;
      border-bottom: 1px solid #eee;
      background-color: rgb(255, 255, 255);
    }
  }
}
</style>
<style lang="scss">
.page .label-must .el-form-item__label:before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}
</style>
